<template>
  <div>
    <!--购物车 -->
    <!-- 顶部导航栏 -->
    <div class="naviBar">
      <van-sticky>
        <van-nav-bar
          title="购物车"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft()"
        />
      </van-sticky>
    </div>
    <!-- 中间产品展示页面 -->
    <div class="productShow">
      <!-- 左侧栏目分类选择 -->
      <div class="leftSideBar">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            v-for="category in categoryData"
            :key="category.id"
            :title="category.name"
            @click="querySelectedProduct(category.id)"
          />
        </van-sidebar>
      </div>
      <!-- 右侧产品购买区域 -->
      <div class="rightPruductArea">
        <van-card
          v-for="product in productData"
          :key="product.id"
          :price="product.price + '.00'"
          :desc="product.description"
          :title="product.name"
          :thumb="product.photo"
          currency="￥"
        >

          <template #footer>
            <!-- 步进器 -->
            <van-stepper
              v-model="product.number"
              theme="round"
              button-size="20"
              default-value
              min="0"
              @change="productNumberChange(product)"
            />
          </template>
        </van-card>
      </div>
    </div>
    <!-- 底部订单提交 -->
    <div class="buttomOrderSubmit">
      <van-submit-bar
        :price="total * 100"
        button-text="提交订单"
        @submit="onSubmit()"
      />
    </div>
  </div>
</template>

<script>
import { get } from "@/http/axios";
import { mapActions, mapState, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      // 产品数据
      productData: [],

      // 侧边栏被选中的选项
      activeKey: this.$route.query.activeKey,
    };
  },
  computed: {
    // 获得总价格
    ...mapGetters("shopcart", ["total"]),

    // 从vuex中获得栏目数据
    ...mapState("category", ["categoryData"]),

    // 从vuex中获得购物车已选择数据
    ...mapState("shopcart", ["orderLines"]),
  },
  methods: {
    // 引入shopcar vuex中的 addShopcart方法
    ...mapMutations("shopcart", ["addShopcart", "clearShopcart"]),

    // 引入product vuex中的 getAllProductData方法
    ...mapActions("product", ["getAllProductData"]),

    // 引入categorie vuex中的 getAllCategoryData 方法
    ...mapActions("category", ["getAllCategoryData"]),

    // 跳转结账页面
    onSubmit() {
      this.$router.push({
        path: "/paybill",
      });
    },

    queryAllCategoryData() {
      const data = {
        page: 1,
        pageSize: 999,
        status: "正常",
      };
      this.getAllCategoryData(data);
    },

    // 当步进器有变化时，将商品添加到购物车map中
    productNumberChange(product) {
      let orderLines = {
        productId: product.id,
        productName: product.name,
        price: product.price,
        number: product.number,
      };
      this.addShopcart(orderLines);
    },

    // 请求所选中的栏目的商品的数据
    async querySelectedProduct(categoryDataId) {
      const data = {
        page: 1,
        pageSize: 999,
        status: "正常",
        productCategoryId: categoryDataId,
      };
      const res = await get("/product/pageQuery", data);
      this.productData = res.data.data.list;
    },

    // 导航栏返回
    onClickLeft() {
      this.clearShopcart();
      this.$router.go(-1);
    },
  },
  created() {
    // 获取 vuex中的所有栏目数据
    this.queryAllCategoryData();

    // 进入时请求选中栏目的产品数据
    this.querySelectedProduct(this.$route.query.categoryId);
  },
};
</script>

<style scoped>
.naviBar {
  width: 100%;
  background: wheat;
}
.productShow {
  display: flex;
}
.leftSideBar {
  flex-grow: 1;
}
.rightPruductArea {
  flex-grow: 3;
}
.van-sidebar-item {
  padding: 20px 0px 20px 30px;
}
.van-sidebar {
  width: 100%;
}
.van-submit-bar__button--danger
{
  background: linear-gradient(to right, #ff6034, #ee0a24);
}
</style>